<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5语义化标签示例</title>
	<style>
		header, nav, main, article, section, aside, footer { border: 1px solid #ccc; margin: 10px; padding: 15px; }
		nav ul { list-style: none; padding: 0; }
		nav li { display: inline; margin-right: 20px; }
	</style>
</head>
<body>

	<!-- 页面主头部 -->
	<header> 
		<h1>个人学习笔记</h1>
		<p>经供参考</p>
	</header>

	<nav>
		<ul>
			<li><a href="https://gitee.com/skate-by/web-qian">个人gitee仓库</a></li>
			<li><a href="https://segmentfault.com/a/1190000045465892">文章</a></li>
			<li><a href="#about">关于我们</a></li>
		</ul>
	</nav>

	<main> 
		
		<article>
			<header>
				<h2>一篇关于语义化标签的文章</h2>
				<p>发布日期: <time datetime="2025-09-27">2025年9月17日</time></p>
			</header>

			<section> 
				<h3>什么是语义化标签？</h3>
				<p>语义化标签是指...</p>
				<figure> 
					<img src="https://segmentfault.com/img/bVdeyFe?spec=cover" alt="HTML5语义化结构图解">
					<figcaption>图1: HTML5文档结构示例</figcaption> 
				</figure>
			</section>

			<section>
				<h3>为什么使用语义化标签？</h3>
				<p>使用它们的好处是...</p>
			</section>

			<footer>
				<p>文章标签: <mark>HTML5</mark>, <mark>Semantic Web</mark></p>
			</footer>
		</article>

	</main>

	<aside> 
		<h3>相关推荐</h3>
		<ul>
			<li><a href="#">链接一</a></li>
			<li><a href="#">链接二</a></li>
		</ul>
	</aside>

	<footer> 
		<p>© 2025 XX网站. 保留所有权利.</p>
		<address>联系我们: <a href="mailto:contact@example.com">contact@example.com</a></address>
	</footer>

</body>
</html>